<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>订单创建：{{this.$store.state.items.order_info.sub_order_id}}</span>
      <el-button style="float: right; padding: 10px 0" type="text" @click="confirmOrder">下单</el-button>
    </div>
    <el-row style="height:100%">
      <el-col :span="8" style="border-right: solid 1px #e6e6e6;box-sizing: border-box">
        <el-image style="height:480px;width:480px;" fit="fill" :src="this.$store.state.items.item_current.item_picture"></el-image>
      </el-col>

      <el-col :span="16" style="padding:0 20px;height:100% " class="order_item_details">
        <div class="order_item_name">商品名称：{{this.$store.state.items.item_current.item_name}}</div>
        <div class="order_item_price">商品单价：￥{{this.$store.state.items.item_current.item_price}}</div>
        <div class="order_item_num">购买数量：<el-input-number v-model="purchaseNum"  :min="1" :max="10" label="购买数量" @change="handleChange"></el-input-number></div>
        <div class="order_item_add">收货地址：
          <span :visivle.sync="hasAddress">{{currentAddress}}</span>
          <el-button type="text" @click="chooseAddress">选择收货地址</el-button>
          <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="addressData" ref="addressTable" @row-click="chooseOneAddress">
              <el-table-column property="address" label="地址列表"></el-table-column>
            </el-table>
          </el-dialog>
        </div>
        <div class="order_item_money">总价:
            <el-button type="text" size="medium">￥{{this.order_money}}</el-button>
        </div>
      </el-col>
    </el-row>

  </el-card>
</template>

<script>
export default {
  name: "order_card",
  data(){
    return{
      addressData: [],
      dialogTableVisible: false,
      hasAddress:false,
      currentAddress:'',
      currentAddressId:'',
      purchaseNum:1,
      order_money:this.$store.state.items.item_current.item_price
    }
  },
  methods:{
    confirmOrder(){
      this.$store.state.items.order_info.item_num = this.purchaseNum
      this.$store.state.items.order_info.address_id = this.currentAddressId
      this.$store.dispatch('items/confirmOrder', this.$store.state.items.order_info).then(()=>{
        this.$message.success('下单成功！') ;
        this.$router.push('/order')
      }).catch(e=>[
        this.$message.error('下单失败')
      ])
    },
    chooseAddress(){
      this.dialogTableVisible = true
    },
    chooseOneAddress(row){
      this.currentAddress = row.address;
      this.currentAddressId = row.address_id;
      this.dialogTableVisible = false;
    },
    handleChange() {
      console.log(this.purchaseNum)
      this.order_money = parseInt(this.purchaseNum) * parseFloat(this.$store.state.items.item_current.item_price);
    }
  },
  created() {
    this.$store.dispatch('items/initOrder').then(()=>{
      this.addressData = this.$store.state.items.address_list
      this.addressData.splice(0,0)
      this.addressData.forEach(each=>{
        if(each.is_default){
          this.currentAddress = each.address;
        }
      })
    }).catch(e=>{
      console.log('用户地址初始化失败')
    })
  }
}
</script>

<style>
.box-card {
  margin: 20px;
  padding:20px;
}
.el-table__row{
  cursor: pointer;
}
.order_item_name{
  font-size: 1.5rem;
}
.order_item_price{
  margin:3% 0;
}
.order_item_num{
  margin:3% 0;
}
.order_item_add{
  margin:3% 0;
}
.order_item_money{
  font-size: 1.5rem;
  float:right;
  bottom: 0;
}

</style>
